.s-dropdown-menu {
  &__list {
    position: relative;
    display: flex;
    height: $dropdown-menu-height;
    background: $dropdown-menu-background;
    box-shadow: $dropdown-menu-box-shadow;
  }

  &__item {
    font-size: $dropdown-menu-font-size;
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center;
    box-sizing: border-box;
    width: 0;
    padding: $dropdown-menu-padding;
    color: $dropdown-menu-color;

    &-arrow {
      font-size: $dropdown-menu-arrow-size;
      position: relative;
      margin-left: 10rpx;
      content: '';
      transition: transform $animation-duration-base;
      transform: translateY(-20%) rotate(-45deg);
      opacity: .8;
      border: 3px solid;
      border-color: transparent transparent $gray-4 $gray-4;
    }

    &--up &-arrow {
      transform: translateY(50%) rotate(135deg);
    }

    &--active {
      color: $dropdown-menu-active-color;
    }

    &--active &-arrow {
      transform: translateY(50%) rotate(135deg);
      border-color: transparent transparent currentColor currentColor;
    }

    &--up#{&}--active &-arrow {
      transform: translateY(-20%) rotate(-45deg);
    }

    &--disabled {
      color: $dropdown-menu-disabled-color;
    }
  }
}